<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <!-- 公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
</head>

<body>
    <!-- 头部 开始 -->
    <nav class="nav">
        <div class="nav-title">
            <div class="logo">
                <img src="./img/mi.png" alt="">
            </div>
            <div>
                <ul class="title">
                    <a href="#">
                        <li class="active">小米官网</li>
                    </a>
                    <a href="./shangchengye.html" target="_blank">
                        <li>小米商城</li>
                    </a>
                    <li>小米影像</li>
                    <li>MIUI</li>
                    <li>loT</li>
                    <li>云服务</li>
                    <li>天星数科</li>
                    <li>有品</li>
                    <li>小爱开发平台</li>
                    <li>企业团购</li>
                </ul>
            </div>
            <div class="login">
                <span>登录</span> <span>|</span> <span>注册</span>
            </div>
        </div>
    </nav>
    <!-- 头部 结束 -->
    <!-- 主体 开始 -->
    <div class="main">
        <div class="photo">
            <img src="https://img.youpin.mi-img.com/ferriswheel/43b7cae9_65d9_4dea_87a4_4cedfcc758e6.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                alt="">
        </div>
        <div class="wrap" id="wrap">
            <ul class="swiper">
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/5f09b380_e166_48e2_8b60_d3a8ba118aea.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/c1be511a_f8ac_4fd8_8a64_c02414ee4fbe.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/a3f479cb_560b_440c_9bb0_f91c1a8a744c.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
            </ul>
            <div id="arr">
                <span id="left">&lt;</span><span id="right">&gt;</span>
            </div>
        </div>
        <div class="wrap">
            <ul class="swiper2">
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/ff008507_0972_4270_ad8a_a531c816a330.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/d61c7290_1a4c_4c39_96ab_7aa15df1ff73.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/3ba79a36_5695_473b_be70_9ef5dd8be95c.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
            </ul>
        </div>
        <div class="wrap">
            <ul class="swiper3">
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/b576f55e_57fe_421d_bb20_c1f628502982.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="https://img.youpin.mi-img.com/ferriswheel/3679cea5_0a3d_4e7c_9b17_94055ebfa6f3.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                            alt="">
                    </div>
                </li>
            </ul>
        </div>
        <div class="photo2">
            <img src="https://img.youpin.mi-img.com/ferriswheel/b5ba9bf1_0996_4bfc_a429_8f642051ac7e.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920"
                alt="">
        </div>
        <div class="photo2">
            <img src="https://img.youpin.mi-img.com/ferriswheel/9ecf9649_0447_4a48_8925_5a3cfdfd6da1.png@base@tag=imgScale&F=webp&h=1093&q=90&w=1920"
                alt="">
        </div>
    </div>
    <!-- 主体 结束 -->
    <!-- 底部 开始 -->
    <footer class="footer">
        <div class="top">
            <div class="left">
                <ul class="title">
                    <li>选购指南</li>
                    <li>服务中心</li>
                    <li>线下门店</li>
                    <li>关于小米</li>
                    <li>关注我们</li>
                </ul>
                <ul class="content">
                    <li>手机</li>
                    <li>申请售后</li>
                    <li>小米之家</li>
                    <li>了解小米</li>
                    <li>新浪微博</li>
                </ul>
                <ul class="content">
                    <li>电视</li>
                    <li>售后政策</li>
                    <li>服务网点</li>
                    <li>加入小米</li>
                    <li>官方微信</li>
                </ul>
                <ul class="content">
                    <li>笔记本</li>
                    <li>维修服务价格</li>
                    <li>授权体验店/专区</li>
                    <li>投资者关系</li>
                    <li>联系我们</li>
                </ul>
                <ul class="content">
                    <li>联系我们</li>
                    <li>订单查询</li>
                    <li></li>
                    <li>企业社会责任</li>
                    <li>公益基金会</li>
                </ul>
                <ul class="content">
                    <li>穿戴</li>
                    <li>以旧换新</li>
                    <li></li>
                    <li>以旧换新</li>
                    <li></li>
                </ul>
                <ul class="content">
                    <li>耳机</li>
                    <li>保障服务</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="content">
                    <li>家电</li>
                    <li>防伪查询</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="content">
                    <li>路由器</li>
                    <li>F码通道</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="content">
                    <li>音箱</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="content">
                    <li>配件</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="right">
                <p class="p1">400-100-5678</p>
                <p class="p2">8:00-18:00（仅收市话费）</p>
                <div>
                    人工客服
                </div>
            </div>
        </div>
        <div class="bot"></div>
    </footer>
    <!-- 底部 结束 -->
    <!-- 箭头 开始 -->
    <div class="scrollBtn">
        <img src="./img/scroll.png" alt="">
    </div>
    <!-- 箭头 结束 -->
    <!-- js -->
    <!-- jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./js/scroll.js"></script>
    <script src="./js/swiper.js"></script>
</body>

</html>